<template>
  <a-popover :title="null" :placement="placement">
    <template slot="content">
      <a-row>
        <a-col :span="12">
          <div>{{ $t('deviceDetail.role') }}</div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon']"
              />
            </div>
            <div class="name">{{ $t('deviceDetail.tecWAN') }}</div>
          </div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-light'"
                :rotate="0"
                :class="['port-icon']"
              />
            </div>
            <div class="name">{{ $t('deviceDetail.sfp') }}</div>
          </div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon']"
              />
              <div style="pointer-events: none">
                <icon-font :type="'ic-port-union'" class="over-icon" />
              </div>
            </div>
            <div class="name">{{ $t('deviceDetail.upwan') }}</div>
          </div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon']"
              />
              <div style="pointer-events: none">
                <icon-font :type="'ic-port-block'" class="over-icon" />
              </div>
            </div>
            <div class="name">{{ $t('deviceDetail.blocking') }}</div>
          </div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon']"
              />
              <div style="pointer-events: none">
                <icon-font :type="'ic-port-wan'" class="over-icon" />
              </div>
            </div>
            <div class="name">{{ $t('deviceDetail.wan') }}</div>
          </div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon']"
              />
              <div style="pointer-events: none">
                <div class="over-icon agg">1</div>
              </div>
            </div>
            <div class="name">{{ $t('deviceDetail.polymerization') }}</div>
          </div>
        </a-col>
        <a-col :span="12">
          <div>{{ $t('deviceDetail.state') }}</div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon', 'green']"
              />
            </div>
            <div class="name">{{ $t('deviceDetail.than100') }}</div>
          </div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon', 'yellow']"
              />
            </div>
            <div class="name">10M/100M</div>
          </div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon']"
              />
            </div>
            <div class="name">{{ $t('deviceDetail.disconnect') }}</div>
          </div>
          <div class="item">
            <div class="icon">
              <icon-font
                :type="'ic-port-electric'"
                :rotate="0"
                :class="['port-icon', 'disbaled']"
              />
            </div>
            <div class="name">{{ $t('deviceDetail.blocked') }}</div>
          </div>
        </a-col>
      </a-row>
    </template>
    <a><a-icon type="question-circle" /> {{ $t('deviceDetail.interface1') }}</a>
  </a-popover>
</template>
<script>
export default {
  name: 'FirewallLegend',
  props: {
    placement: {
      type: String,
      default: 'bottom',
    },
  },
};
</script>
<style lang="less" scoped>
.item {
  display: flex;
  align-items: center;
  .icon {
    position: relative;
    padding: 0px 4px;
    .port-icon {
      font-size: 18px;
    }
  }
  .name {
    white-space: nowrap;
    font-size: 12px;
  }
}

.port-icon {
  color: @portBlack;
  & + div {
    .status-icon {
      color: @portBlack;
      border-color: @portBlack;
    }
  }
  &.green {
    color: @portGreen;
    & + div {
      .status-icon {
        color: @portGreen;
        border-color: @portGreen;
      }
      .c-edited {
        border-color: @portGreen;
      }
    }
  }
  &.yellow {
    color: @portYellow;
    & + div {
      .status-icon {
        color: @portYellow;
        border-color: @portYellow;
      }
      .c-edited {
        border-color: @portYellow;
      }
    }
  }
  &.red {
    color: @portRed;
  }
  &.disbaled {
    color: @portDisabled;
    & + div {
      .status-icon {
        color: @portDisabled;
        border-color: @portDisabled;
      }
      .c-edited {
        border-color: @portDisabled;
      }
    }
  }
}
.over-icon {
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  &.agg {
    background-color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    color: #595959;
    font-size: 12px;
    transform: scale(0.75);
    left: 50%;
    top: 50%;
    margin-top: -8px;
    margin-left: -8px;
  }
}
.status-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  border: 1px solid #595959;
  color: #595959;
  text-align: center;
  line-height: 16px;
  background-color: #fff;
  z-index: 2;
  bottom: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  transform: scale(0.75);
}
</style>
